<template>
    <div class="box">
        <div class="titleone">员工登录</div>
        <div class="titletwo">提升账号安全，保障合法权益</div>
        <div class="bacbluetitle">
            <img class="img" src="../../static/idcardsm.png" alt=""><span>请使用有效身份证证件信息认证</span>
        </div>
        <div class="contentbox">
            <div class="name">
                <div class="lable">姓名</div>
                <div class="lablecontent">
                    <input type="text" v-model="userName" placeholder="请输入">
                </div>
            </div>
            <div :class="{ idcard: true, noborder: !hassm }">
                <div class="lable">身份证号</div>
                <div class="lablecontent">
                    <input type="text" v-model="idcard" @input="changeid" placeholder="请输入">
                </div>
            </div>
            <div class="jg" v-if="showidjg">
                <img class="img" src="../../static/Vector.png" alt="">
                <span>请输入正确格式的身份证号</span>
            </div>
            <!-- <div class="phone" v-if="!hassm">
                <div class="lable">手机号</div>
                <div class="lablecontent">
                    <input type="text" disabled v-model="userPhone" placeholder="请输入">
                    <button class="obtain" plain="true" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
                        获取手机号
                    </button>
                </div>
            </div> -->
        </div>
        <button :disabled="!isselect" class="short-btn" @click="submit">
            提交
        </button>
        <div class="msg" @click="isselect = !isselect">
            <checkbox color="#d95757" style="transform:scale(0.5);" :checked="isselect" class="round red" />
            <view>
                我已阅读并同意
                <text class="blue">《子弹CRM平台用户服务协议》</text>、
                <text class="blue">《隐私协议》</text>
            </view>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import user from '@/utils/user'
import { onLoad } from '@dcloudio/uni-app'
import global from '@/utils/global'
import { encryptedPhoneData, register } from '@/api/base'
import { checkrealname, changepersonmsgapi, getuserinfo } from '@/api/personalmsgapi'
import { toast, getUserProfile } from '@/utils/util'
const isselect = ref(false)
const changeid = (val: any) => {
    const idcardreg = /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/
    const flag = idcardreg.test(val.detail.value)
    if (!flag) {
        showidjg.value = true
    } else {
        showidjg.value = false
    }
}
onLoad((option: any) => {
    // if (option.hassm) {
    //     hassm.value = true
    //     getuserinfofn()
    // } else {
    hassm.value = false
    // }
})
const showall = ref(false)
const getuserinfofn = () => {
    getuserinfo().then((res: any) => {
        console.log(res, '个人信息')
        tx.value = res.salesHeadUrl
        sex.value = (res.sex) * 1
        name.value = res.salesName
        userid.value = res.id
        myPhone.value = res.phone
    })
}
const name = ref('')
const tx = ref('')
const sex = ref(1)
const userid = ref<any>(null)
const hassm = ref(false)
const getPhoneNumber = async (event: { detail: { encryptedData: string, iv: string, errMsg: string } }) => {
    console.log(event, 'event')
    if (event.detail.errMsg === 'getPhoneNumber:fail user deny') {
        return 1
    } else {
        const data = {
            appId: global.appId,
            encryptedData: event.detail.encryptedData,
            iv: event.detail.iv,
            openid: user.openId
        }
        const phone = await encryptedPhoneData(data)
        userPhone.value = phone.phoneNumber
    }
}
const myPhone = ref('')
const showidjg = ref(false)
const submit = () => {
    const phonereg = /^(?:(?:\+|00)86)?1\d{10}$/
    const idcardreg = /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/
    if (!userName.value) {
        toast('请输入姓名')
        return
    }
    if (!idcard.value) {
        toast('请输入身份证号')
        return
    }
    if (!idcardreg.test(idcard.value)) {
        toast('请输入正确身份证号')
        showidjg.value = true
        return
    }
    if (hassm.value) {
        checkrealname({
            realName: userName.value,
            idCardNo: idcard.value
        }).then((res: any) => {
            console.log(res, 'fayufuyisgyhs')
            changepersonmsgapi(
                {
                    id: userid.value,
                    phone: myPhone.value,
                    realName: userName.value,
                    idCardNo: idcard.value,
                    salesHeadUrl: tx.value,
                    salesName: name.value,
                    sex: sex.value
                }
            ).then((res: any) => {
                console.log(res, 'syudfhsu')
                uni.reLaunch({
                    url: '/pages/messageinfo/messageinfo'
                })
            })
        })
    } else {
        // if (!userPhone.value) {
        //     toast('请输入手机号')
        //     return
        // }
        // if (!phonereg.test(userPhone.value)) {
        //     toast('请输入正确手机号')
        //     return
        // }
        const info = getUserProfile()
        user.sex = info.gender
        checkrealname({
            realName: userName.value,
            idCardNo: idcard.value
        }).then(async (res: any) => {
            console.log(res, 'fayufuyisgyhs')
            register({
                openId: user.openId,
                salesName: userName.value,
                realName: userName.value,
                salesHeadUrl: user.avatarUrl as string,
                // phone: userPhone.value,
                sex: user.sex as number,
                idCardNo: idcard.value
            }).then(async () => {
                await user.login()
                // uni.redirectTo({ url: '/pages/toExamine/toExamine?type=success&title=等待审核' })
                uni.switchTab({ url: '/pages/express-center/index' })
            })
        })
    }
}
const userPhone = ref('')
const userName = ref('')
const idcard = ref('')
</script>

<style lang="scss" scoped>
.titleone {
    padding-top: 20rpx;
    font-size: 70rpx;
    font-weight: 800;
    color: #202536;
    margin-bottom: 13rpx;
}

.titletwo {
    color: #9497B1;
    font-size: 28rpx;
    margin-bottom: 30rpx;
}

.bacbluetitle {
    width: 100%;
    box-sizing: border-box;
    height: 104rpx;
    background: rgba(235, 239, 254, 0.6);
    display: flex;
    align-items: center;
    padding-left: 32rpx;
    font-size: 32rpx;
    color: #202536;
    margin-bottom: 24rpx;

    .img {
        width: 62rpx;
        height: 44rpx;
        margin-right: 10rpx;
        margin-top: 5rpx;
    }
}

.obtain {
    flex: none;
    color: #ff7e68;
    font-size: 28rpx;
    border: none;
}

.msg {
    color: #9497B1;
    font-size: 28rpx;
    margin-top: 40rpx;
    display: flex;
    align-items: center;
}

.contentbox {
    background-color: #FFFFFF;
    padding: 0 32rpx;
    width: 100%;
    box-sizing: border-box;
    border-radius: 16rpx;

    .jg {
        display: flex;
        align-items: center;
        color: #FF7642;
        font-size: 24rpx;
        padding: 20rpx 0;

        .img {
            width: 24rpx;
            height: 24rpx;
            margin-right: 12rpx;
        }
    }

    .idcard {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        height: 98rpx;
    }

    .name,
    .phone {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        height: 98rpx;
        border-bottom: 1px solid #EAEAEF;
    }

    .lable {
        width: 150rpx;
    }

    .lablecontent {
        flex: 1;
    }

    .phone .lablecontent {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.btnbox {
    width: 100%;
    margin-top: 118rpx;
    box-sizing: border-box;
    padding: 30rpx 0;
    background-color: #3E5FF5;
    border-radius: 43rpx;
    text-align: center;
    color: #FFFFFF;
    font-size: 32rpx;
}

.short-btn {
    margin-top: 60rpx;
    width: 100%;
}

.box {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    overflow: auto;
    padding: 42rpx;
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/crm/aae90ee4-2241-4b90-837a-7b3d7cf1f97a.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 -200rpx;
}

.blue {
    color: #3E5FF5;
}

.noborder {
    border-bottom: 1px solid #EAEAEF;
}
</style>
